<template>
    <div class="login_panel">
        <!-- logo部分 -->
<!--        <div class="logo">-->
<!--            <img src="./../../icons/反白logo@2x.png" width="200" height="40" alt="">-->
<!--        </div>-->
        <!-- 登录窗口 -->
        <div class="login_box">
            <img src="../../images/wenone.png" width="19" height="17" alt="" class="one">
            <img src="../../images/wentwo.png" width="58" height="50" alt="75" class="two">
            <p class="lg_title">智能表单</p>
            <p class="welcome">在这里重置密码</p>
            <div v-show="oneOrTwo" class="login_form">
                <div class="emailCent">
                    <p class="emailTip">请输入注册邮箱</p>
                    <input type="email" class="emailIn" placeholder="" v-model="email">
                    <img class="chahao" v-show="emailTip" src="http://api-lunacy.icons8.com/api/assets/cd1f1a92-8a2b-4c51-af59-55c733cc9dfb/btn_x.png" alt="">
                    <span class="tips">未注册邮箱</span>
                </div>
                <div class="confirmCent">
                    <p class="passwTip">请输入验证码</p>
                    <input type="text" class="passwordIn" v-model="codeConfirm">
                    <img :src="imgCode" alt="" @click="refresh">
                    <span class="tips">验证码错误</span>
                </div>
            </div>
            <div v-show="oneOrTwo" class="goinNow" @click="sendEmail">
                下一步
            </div>
            <div v-show="!oneOrTwo&&!threeShow" class="sendTwo">
                <p>我们发送了一封激活邮件到您的邮箱</p>
                <span>ggggxxllaadd@qq.com</span>
                <p> 请<span>前往邮箱</span> 点击激活链接完成注册</p>
                <div @click="gotoTree">下一步</div>
<!--                <h5 @click="goback">返回 &nbsp; 注册</h5>-->
            </div>
            <div v-show="threeShow" class="login_form">
                <div class="emailCent">
                    <p class="emailTip">新密码</p>
                    <input type="email" class="emailIn" placeholder="" v-model="newPassword">
                    <img class="chahao" v-show="emailTip" src="http://api-lunacy.icons8.com/api/assets/cd1f1a92-8a2b-4c51-af59-55c733cc9dfb/btn_x.png" alt="">
                    <span class="tips">新密码</span>
                </div>
                <div  class="goinNow">
                    保存
                </div>
            </div>
            <div class="login_bottom" @click="gotoLogin">
                <p class="gotoRegister">已经有账号了？ 去登录</p>
            </div>
        </div>
    </div>
</template>

<script>
    import api from "../../public/api/api";
    // import {Message} from "element-ui";

    export default {
        data() {
            return {
                oneOrTwo: true,
                email:'',
                emailTip:false,
                password:'',
                codeConfirm:'',
                passwordTip:false,
                Passwordshow:false,
                imgCode:'',
                uuid:'',
                newPassword:'',
                threeShow:false
            };
        },
        watch:{
            email:function (val) {
                if(val.length>0){
                    this.emailTip=true
                }
            },
            password:function (val) {
                if(val.length>0){
                    this.passwordTip=true
                }
            }
        },
        mounted() {
            this.refresh()
        },
        methods: {
            refresh(){
                var that=this;
                api.post('get','api/common/captcha?config=register')
                    .then(function (response) {
                        console.log(response);
                        that.imgCode=response.data.image;
                        that.uuid=response.data.uuid;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            gotoTree(){
                var that=this;
                that.threeShow=true;
                that.oneOrTwo=false;

            },
            clearCont(val){
                if(val=='email'){
                    this.email=''
                }else{
                    this.password=""
                }
            },
            togglePassword(){
                this.Passwordshow=!this.Passwordshow
            },
            sendEmail(){
                 var that=this;
                var params={
                    'email': this.email,
                    '__captcha_uuid': this.uuid,
                    '__captcha_code':this.codeConfirm
                }
                api.post('Post','api/auth/forgot', params,'formData')
                    .then(function (response) {
                        console.log(response);
                        console.log(params);
                        that.oneOrTwo=!that.oneOrTwo;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            goback(){
                this.oneOrTwo=!this.oneOrTwo;
            },
            gotoLogin(){
                this.$router.push("/login")
            }
        }
    }
</script>

<style lang="less" scoped>
    @import url('./resetWord');
</style>


